<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script src="/style/public/publicStyle.js"></script>
</head>
<body>
<!--表格-->
<div class="weadmin-body">

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md3">
                <!--<div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" style="float: left" placeholder="过滤分类" autocomplete="off" class="layui-input">
                </div>-->
                <div id="fucaTree" class="demo-tree"></div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-row" id="tableForm">
                    <div class="layui-col-md10">
                        <form class="layui-form layui-from-pane" id="myForm" style="margin-top:20px" lay-filter="tableForm">
                            <input type="hidden" name="id" id="id"/>
                            <div class="layui-form-item">
                                <label class="layui-form-label">编码</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cd"  required  lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="na"  required  lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">显示标志</label>
                                <div class="layui-input-block">
                                    <select name="fgShow" lay-filter="fgShow">
                                        <option value="1" selected>显示</option>
                                        <option value="0">隐藏</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">上级</label>
                                <div class="layui-input-block">
                                    <select name="idFa" lay-filter="idFa" disabled id="idFa">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-top:40px">
                                <div class="layui-input-block">
                                    <button class="layui-btn  layui-btn-submit " lay-submit  lay-filter="saveFilter">保存</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body >
<script>
layui.use(['tree', 'util','form'], function(){
    var tree = layui.tree
        ,layer = layui.layer
        ,util = layui.util
        ,form = layui.form;
    var data1 = [{
        title: '虚拟分类'
        ,field: 'name1'
        ,checked: true
    }];

    var openForm;
    tree.render({
        elem: '#fucaTree'
        ,data: data1
        ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
        ,edit: ['add', 'update', 'del'] //操作节点的图标
        ,id: 'fucaTree'
        ,operate: function(obj) {
            var type = obj.type;
            var data = obj.data;
            var elem = obj.elem;
            if(type=="add") {
                $("#myForm")[0].reset();
                $("#idFa option").remove();
                if(data.id!=null) {
                    $("#idFa").append("<option value='"+data.id+"' selected>"+data.title+"</option>");
                    form.render('select');
                }
                openForm = layer.open({
                    type:1,
                    title:"新增",
                    area:['500px','500px'],
                    content:$("#tableForm")
                });
            } else if(type=="update") {
                $("#id").val(data.id);
                $("#idFa option").remove();
                $("#idFa").append("<option value='"+data.id+"' selected>"+data.title+"</option>");
                form.render('select');
                openForm = layer.open({
                    type:1,
                    title:"新增",
                    area:['500px','500px'],
                    content:$("#tableForm")
                });
            }  else if(type=="del") {
               $.ajax({
                    type:"get",
                    url:"/auth/sysFuca/delete",
                    data: {id:data.id}
                });
            }
        }
    });
    var treeReload = function() {
        $.ajax({
            type:"post",
            url:"/auth/sysFuca/findTree",
            dataType:'json',
            data:[],
            success:function(data){
               data = data.data;
               if(data.length>0) {
                   tree.reload("fucaTree",{data:data});
               }
            }
        });
    };
    treeReload();
    form.on('submit(saveFilter)',function(data) {

        $.ajax({
            type:"post",
            url:"/auth/sysFuca/save",
            dataType:'json',
            contentType:'application/json;charset=UTF-8',
            data: JSON.stringify(data.field),
            success:function(data){
                treeReload();
                layer.close(openForm);
            }
        });
        return false;
    });
});
</script>